<template>
  <div class="appZcInfo">
    <el-dialog :title="dialogAppZc.title" v-model="obj.visible" @update:model-value="dialogAppZcChange"
      :style="{ right: '20px', top: '50%', transform: 'translateY(-50%)', position: 'fixed', margin: '0' }"
      width="800px">
      <el-form ref="enterpriseInfoFormRef" :model="form" :rules="rules" label-width="110px">
        <el-row :gutter="24" class="mb8">
          <el-col :span="18">
            <el-form-item label="企业名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入内容" />
              <span style="font-size: 10px;">企业名需与工商部门登记信息一致；如果是“无主体名称个体工商户”则填“个体户+法人姓名”，例如“个体户张三”</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业代码类型" prop="codeType">
              <el-select v-model="form.codeType" placeholder="请选择企业代码类型">
                <el-option v-for="dict in code_type" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业代码" prop="code">
              <el-input v-model="form.code" placeholder="请输入企业代码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人微信号" prop="legalPersonaWechat">
              <el-input v-model="form.legalPersonaWechat" placeholder="请输入法人微信号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人姓名" prop="legalPersonaName">
              <el-input v-model="form.legalPersonaName" placeholder="请输入法人名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人身份证号" prop="legalPersonaSfzh">
              <el-input v-model="form.legalPersonaSfzh" placeholder="请输入法人身份证号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号码" />
            </el-form-item>
          </el-col>
          <!--  <el-col :span="12">
              <el-form-item label="企业logo" prop="logo">
                <el-input v-model="form.logo" placeholder="请输入企业logo" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="营业执照" prop="certificateOfBusiness">
                <el-input v-model="form.certificateOfBusiness" placeholder="请输入营业执照" />
              </el-form-item>
            </el-col>-->
          <el-col :span="12">
            <el-form-item label="企业logo" prop="logo">
              <image-upload v-model="form.logo" :isShowTip="false" :limit="1" />
              <span style="font-size: 10px;">只能上传jpg/png文件，且不超过500kb</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="营业执照" prop="certificateOfBusiness">
              <image-upload v-model="form.certificateOfBusiness" :isShowTip="false" :limit="1" />
              <span style="font-size: 10px;">只能上传jpg/png文件，且不超过500kb</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">注 册</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="AppZcInfo" lang="ts">
import { listEnterpriseInfo, getEnterpriseInfo, delEnterpriseInfo, addEnterpriseInfo, updateEnterpriseInfo, registerMiniprogram } from '@/api/platform/enterpriseInfo';
import { EnterpriseInfoVO, EnterpriseInfoQuery, EnterpriseInfoForm } from '@/api/platform/enterpriseInfo/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { code_type } =
  toRefs<any>(proxy?.useDict('code_type'));
const obj = defineProps({
  qyId: {
    type: [String, Number],
    default: undefined
  },
  visible: {
    type: Boolean,
    required: true
  }
}) //


const buttonLoading = ref(false);
const enterpriseInfoFormRef = ref<ElFormInstance>();
const dialogAppZc = reactive<DialogOption>({
  visible: false,
  title: '小程序注册'
});

const initFormData: EnterpriseInfoForm = {
  id: undefined,
  name: undefined,
  code: undefined,
  codeType: undefined,
  authorize: undefined,
  legalPersonaWechat: undefined,
  legalPersonaName: undefined,
  legalPersonaSfzh: undefined,
  phone: undefined,
  logo: undefined,
  certificateOfBusiness: undefined,
  remark: undefined
}
const data = reactive<PageData<EnterpriseInfoForm, EnterpriseInfoQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: undefined,
    code: undefined,
    codeType: undefined,
    authorize: undefined,
    legalPersonaWechat: undefined,
    legalPersonaName: undefined,
    legalPersonaSfzh: undefined,
    phone: undefined,
    logo: undefined,
    certificateOfBusiness: undefined,
    params: {
    }
  },
  rules: {
    name: [
      { required: true, message: "企业名称不能为空", trigger: "blur" }
    ],
    code: [
      { required: true, message: "企业代码不能为空", trigger: "blur" }
    ],
    codeType: [
      { required: true, message: "企业代码类型不能为空", trigger: "change" }
    ],
    authorize: [
      { required: true, message: "是否授权不能为空", trigger: "blur" }
    ],
    legalPersonaWechat: [
      { required: true, message: "法人微信号不能为空", trigger: "blur" }
    ],
    legalPersonaName: [
      { required: true, message: "法人名称不能为空", trigger: "blur" }
    ],
    legalPersonaSfzh: [
      { required: true, message: "法人身份证号不能为空", trigger: "blur" }
    ],
    phone: [
      { required: true, message: "手机号码不能为空", trigger: "blur" }
    ],
    logo: [
      { required: true, message: "企业logo不能为空", trigger: "blur" }
    ],
    certificateOfBusiness: [
      { required: true, message: "营业执照不能为空", trigger: "blur" }
    ],
    remark: [
      { required: true, message: "备注不能为空", trigger: "blur" }
    ]
  }
});

const { queryParams, form, rules } = toRefs(data);

const emit = defineEmits(['update:visible'])
const dialogAppZcChange = (val: boolean) => {
  emit('update:visible', val)
}

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  enterpriseInfoFormRef.value?.resetFields();
}

/** 详情按钮操作 */
const getInfo = async () => {
  let _id = obj.qyId;
  console.log("6666666666", obj.qyId)
  if (_id != undefined) {
    const res = await getEnterpriseInfo(_id);
    form.value = res.data;
    dialogAppZc.visible = true;
    dialogAppZc.title = '小程序修改'
  } else {
    dialogAppZc.visible = true;
  }
}

/** 取消按钮 */
const cancel = () => {
  reset();
  dialogAppZcChange(false)
}

/** 提交按钮 */
const submitForm = () => {
  enterpriseInfoFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      await registerMiniprogram(form.value).finally(() => buttonLoading.value = false);
      proxy?.$modal.msgSuccess("操作成功");
      dialogAppZc.visible = false;
    }
  });
}
onMounted(() => {
  getInfo();
});
</script>
<style lang="scss">
.box-card {
  background: #fff;
}

.spanCla {
  margin-bottom: 15px;
}

.card-header {
  display: flex;
  align-items: center;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 120px;
  /* 默认显示两行高度 */
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
}

.tag-container::-webkit-scrollbar {
  width: 4px;
}

.tag-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.tag-item {
  transition: transform 0.2s ease;
}

.tag-item:hover {
  transform: translateY(-1px);
}

.el-check-tag {
  display: inline-flex;
  /* 改为内联弹性布局 */
  width: auto !important;
  /* 移除固定宽度限制 */
  box-sizing: border-box;
  margin: 0;
  white-space: nowrap;
  overflow: visible;
  /* 允许内容溢出 */
  text-overflow: clip;
  /* 移除省略号 */
  padding: 0 12px;
  /* 增加左右内边距 */
  height: 28px;
  line-height: 26px;
  border: 1px solid #dcdfe6;
  background-color: #f5f7fa;
  color: #606266;
  cursor: default;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.el-check-tag.is-checked {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}
</style>
